<template>
  <div class="section-product">
    <banner>
      <img src="../assets/image/banner_02.png">
    </banner>
    <div class="product-content">
      <div class="product-title">
        <p>DM产品</p>
      </div>
      <div class="product-list">
        <div class="product">
          <img src="../assets/image/projuct1.png">
          <p class="introduction">快速BI</p>
          <p>简单、快速、敏捷</p>
        </div>
        <div class="product">
          <img src="../assets/image/projuct2.png">
          <p class="introduction">智能BI</p>
          <p>强大、专业、智能，帮助企业 </br>快速复制</p>
        </div>
        <div class="product">
          <img src="../assets/image/projuct3.png">
          <p class="introduction">数据挖掘</p>
          <p>分布式内存计算，拖拽式设计 </br>挖掘</p>
        </div>
        <div class="product">
          <img src="../assets/image/projuct4.png">
          <p class="introduction">统计分析</p>
          <p>100种统计方法，解决企业统计 </br>业务</p>
        </div>
      </div>
      <div class="product-list">
        <div class="product">
          <img src="../assets/image/projuct5.png">
          <p class="introduction">移动BI</p>
          <p>随时随地获得数据，帮助企业 </br>决策信息</p>
        </div>
        <div class="product">
          <img src="../assets/image/projuct6.png">
          <p class="introduction">数据现象</p>
          <p>对接全球开放数据，帮助企业 </br>决策服务</p>
        </div>
        <div class="product">
          <img src="../assets/image/projuct7.png">
          <p class="introduction">数联平台</p>
          <p>数据领域的银联，帮助企业 </br>获取数据</p>
        </div>
      </div>
    </div>
    <div class="product-content">
      <div class="product-title">
        <p>AI产品</p>
      </div>
      <div class="product-list">
        <div class="product">
          <img src="../assets/image/projuct8.png">
          <p class="introduction">小e机器人</p>
          <p>基于大数据深度学习，实现企业 </br>智慧决策</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import banner from '@/components/banner.vue'
export default {
  components: {
    banner
  }
}
</script>

<style lang="less" scoped>
.product-content {
  width: 1200px;
  margin: 0 auto;
  margin-top: 37px;
  .product-title {
    font-size: 24px;
    width: 100%;
    color: #333333;
    padding-left: 12px;
    border-left: 4px solid #1491ef;
    text-align: left;
    margin-bottom: 10px;
  }
}
p.introduction {
  margin: 24px 0 18px 0;
  font-size: 18px;
  color: #333333;
}
.product-list {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 8px;
  .product {
    margin-right: 25px;
  }
}
.product {
  color: #666666;
  font-size: 16px;
  text-align: center;
  img {
    width: 280px;
    height: 280px;
    display: block;
    border: 1px solid #c7d3e7;
  }
}
</style>
